
<template>
    <div class="homePage">
        <lodeMore :loadBottom="loadMore" :allLoaded="allLoaded" ref="loadmore">
            <div class="main-box">
                <ul class="ads">
                    <a class="item" v-for="(item, index) in ads" :href="index!=4 ? item.linkurl : '/m/rank'" target="_blank" :key="index">
                        <img v-lazy="item.src_text" :alt="item.title">
                        <div v-if="index==4" class="hotnews">
                            <h4 class="title">热搜榜</h4>
                            <a class="nitem" v-for="(newitem, i) in hot" :key="'hotnews'+i">
                                <i>{{i+1}}</i>
                                <label>{{newitem.title}}</label>
                                <em>{{newitem.viewCount}}</em>
                            </a>
                        </div>
                    </a>
                </ul>
                <ul class="news">
                    <a class="item" v-for="(item, index) in list" :href="item.linkurl" target="_blank" :key="index">
                        <img v-lazy="item.src_text" :alt="item.title">
                    </a>
                </ul>
            </div>
        </lodeMore>
    </div>
</template>

<style lang="scss" scope>
    .homePage{
        // background: #808080;
        background: #FFF;
        width: 100%;
        margin: 0;
        position: relative;
        padding: 0;
        font-size: 16px;
        box-sizing: border-box;
        *{
            box-sizing: border-box;
        }
        .main-box{
            width: 100%;
            background: #FFF;
            border-radius: 20px;
            padding: 33px 30px;
            overflow-x: hidden;
            overflow-y: scroll;
            .ads{
                position: relative;
                height: 636px;
                margin: 0;
                padding: 0;
                .item{
                    position: absolute;
                    background: #999;
                    border-radius: 15px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    &:nth-child(1){
                        width: 456px;
                        height: 256px;
                        left: 0;
                        background: #6662AE;
                    }
                    &:nth-child(2){
                        width: 214px;
                        height: 256px;
                        left: 475px;
                        background: #6EDBB8;
                    }
                    &:nth-child(3){
                        width: 214px;
                        height: 166px;
                        left: 0;
                        top: 280px;
                        background: #45B5F2;
                    }
                    &:nth-child(4){
                        width: 214px;
                        height: 166px;
                        left: 0;
                        top: 466px;
                        background: #8EB5FE;
                    }
                    &:nth-child(5){
                        width: 456px;
                        height: 354px;
                        left: 234px;
                        top: 280px;
                        background: #2E2B53;
                    }
                    .hotnews{
                        display: flex;
                        flex-direction: column;
                        padding: 35px 40px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        .title{
                            height: 30px;
                            line-height: 1;
                            margin: 0;
                            font-size: 30px;
                            color: #FFF;
                            text-decoration: none;
                        }
                        .nitem{
                            display: flex;
                            text-decoration: none;
                            align-items: center;
                            height: 40px;
                            margin-top: 20px;
                            i{
                                font-size: 16px;
                                color: #FFF;
                                position: relative;
                                font-style: normal;
                                font-weight: bold;
                                text-decoration: none;
                                line-height: 40px;
                                margin-top: -10px;
                                &::after{
                                    content: "";
                                    height: 18px;
                                    width: 18px;
                                    position: absolute;
                                    border-radius: 50%;
                                    background: rgba($color: #000000, $alpha: 0.3);
                                    z-index: 1;
                                    bottom: 2px;
                                    left: 0;
                                }
                            }
                            label{
                                font-size: 26px;
                                height: 26px;
                                color: #FFF;
                                width: 240px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                margin-left: 10px;
                            }
                            em{
                                color: #AFB1C6;
                                font-weight: bold;
                                font-size: 18px;
                                font-style: normal;
                                margin-left: 25px;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
            .news{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                width: 710px;
                margin: 0;
                padding: 0;
                flex-wrap: wrap;
                .item{
                    height: 166px;
                    border-radius: 15px;
                    margin-top: 24px;
                    margin-right: 24px;
                    background: #5A5B5F;
                    list-style: none;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    &:nth-child(4n+2),
                    &:nth-child(4n+3){
                        width: 214px;
                    }
                    &:nth-child(4n+1),
                    &:nth-child(4n+4){
                        width: 448px;
                    }
                }
            }
        }
    }
</style>

<script>
import Vue from 'vue';
import { Lazyload } from 'mint-ui';
import lodeMore from '@/compoents/loadmore'
Vue.use(Lazyload);
export default {
    name: "homePage",
    data(){
        return {
            page: 0,
            loading: false,
            allLoaded: false,
            ads: [],
            hot: [],
            list: [],
            last_page: 1
        }
    },
    components:{
        lodeMore
    },
    mounted(){
        this.getdata()
    },
    methods:{
        getdata(){
            if(this.allLoaded) return false
            this.loading = true
            let page = this.page
            let list = this.list
            this.$store.dispatch("homepage",{
                page: page + 1
            }).then(res=>{
                let data = res.data
                console.log("homedata", data)
                if(data.hasOwnProperty('other')){
                    // let listdata = data.other
                    this.page = page + 1
                    // this.last_page = listdata.last_page
                    list = list.concat(data.other)
                    if(data.other.length < 1){
                        this.allLoaded = true
                    }
                }
                if(data.hasOwnProperty('ad_1_5') &&data.ad_1_5.length>0){
                    this.ads = data.ad_1_5
                }
                if(data.hasOwnProperty('hot') &&data.hot.length>0){
                    this.hot = data.hot
                }
                this.list = list
                this.loading = false
                this.$refs.loadmore.onBottomLoaded()
            }).catch(e=>{
                this.loading = false
                this.$refs.loadmore.onBottomLoaded()
            })
        },
        loadMore(){
            this.getdata()
        }
    }
}
</script>

